<template>
  <div class="q-pa-md" style="max-width: 350px">
    <t-list bordered class="rounded-borders">
      <t-expansion-item
        expand-separator
        icon="mail"
        label="Inbox"
        caption="5 unread emails"
        default-opened
      >
        <t-expansion-item
          :header-inset-level="1"
          expand-separator
          icon="receipt"
          label="Receipts"
          default-opened
        >
          <t-expansion-item
            switch-toggle-side
            dense-toggle
            label="Today"
            :header-inset-level="1"
            :content-inset-level="2"
          >
            <t-card>
              <t-card-section>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Quidem, eius reprehenderit eos corrupti commodi magni quaerat ex
                numquam, dolorum officiis modi facere maiores architecto
                suscipit iste eveniet doloribus ullam aliquid.
              </t-card-section>
            </t-card>
          </t-expansion-item>

          <t-expansion-item
            switch-toggle-side
            dense-toggle
            label="Yesterday"
            :header-inset-level="1"
            :content-inset-level="2"
          >
            <t-card>
              <t-card-section>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Quidem, eius reprehenderit eos corrupti commodi magni quaerat ex
                numquam, dolorum officiis modi facere maiores architecto
                suscipit iste eveniet doloribus ullam aliquid.
              </t-card-section>
            </t-card>
          </t-expansion-item>
        </t-expansion-item>

        <t-expansion-item
          :header-inset-level="1"
          :content-inset-level="1"
          expand-separator
          icon="schedule"
          label="Postponed"
        >
          <t-card>
            <t-card-section>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem,
              eius reprehenderit eos corrupti commodi magni quaerat ex numquam,
              dolorum officiis modi facere maiores architecto suscipit iste
              eveniet doloribus ullam aliquid.
            </t-card-section>
          </t-card>
        </t-expansion-item>
      </t-expansion-item>

      <t-expansion-item
        :content-inset-level="0.5"
        expand-separator
        icon="mail"
        label="Inbox"
        caption="5 unread emails"
        default-opened
      >
        <t-expansion-item
          expand-separator
          :content-inset-level="0.5"
          icon="receipt"
          label="Receipts"
        >
          <t-expansion-item label="Today" :content-inset-level="0.5">
            <t-card>
              <t-card-section>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Quidem, eius reprehenderit eos corrupti commodi magni quaerat ex
                numquam, dolorum officiis modi facere maiores architecto
                suscipit iste eveniet doloribus ullam aliquid.
              </t-card-section>
            </t-card>
          </t-expansion-item>

          <t-expansion-item label="Yesterday" :content-inset-level="0.5">
            <t-card>
              <t-card-section>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Quidem, eius reprehenderit eos corrupti commodi magni quaerat ex
                numquam, dolorum officiis modi facere maiores architecto
                suscipit iste eveniet doloribus ullam aliquid.
              </t-card-section>
            </t-card>
          </t-expansion-item>
        </t-expansion-item>

        <t-expansion-item
          :content-inset-level="0.5"
          expand-separator
          icon="schedule"
          label="Postponed"
        >
          <t-card>
            <t-card-section>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem,
              eius reprehenderit eos corrupti commodi magni quaerat ex numquam,
              dolorum officiis modi facere maiores architecto suscipit iste
              eveniet doloribus ullam aliquid.
            </t-card-section>
          </t-card>
        </t-expansion-item>
      </t-expansion-item>
    </t-list>
  </div>
</template>
